<template>
  <div class="business">
    <Row>
      <Col span="12" class="business_col">
        <router-link :to="{ name: 'CompanyBaseInfo'}" :class="result.basic=='1'?'istrue':''">
          <span class="business_col-num">1</span>
          <span class="business_col-icon icon-menu1"></span>
          企业基本信息
        </router-link>
      </Col>
      <Col span="12" class="business_col">
        <router-link :to="{ name: 'CompanyScope'}" :class="result.busiscope=='1'?'istrue':''">
          <span class="business_col-num">2</span>
          <span class="business_col-icon icon-menu2"></span>
          企业经营范围
        </router-link>
      </Col>
    </Row>
    <Row>
      <Col span="12" class="business_col">
        <router-link :to="{ name: 'InvestorList' }" :class="result.inv=='1'?'istrue':''">
          <span class="business_col-num">3</span>
          <span class="business_col-icon icon-menu3"></span>
          股东信息填报
        </router-link>
      </Col>
      <Col span="12" class="business_col">
        <router-link :to="{ name: 'CompanySuped' }"  :class="result.mem=='1'?'istrue':''">
          <span class="business_col-num">4</span>
          <span class="business_col-icon icon-menu4"></span>
          主要人员信息
        </router-link>
      </Col>
    </Row>
    <Row>
      <Col span="12" class="business_col" >
        <router-link :to="{ name: 'contact' }" :class="result.contactState=='1'?'istrue':''">
          <span class="business_col-num">5</span>
          <span class="business_col-icon icon-menu5"></span>
          企业联系人
        </router-link>
      </Col>
      <Col span="12" class="business_col"  >
        <router-link :to="{ name: 'FileUpload' }" :class="result.fupload=='1'?'istrue':''">
          <span class="business_col-num">6</span>
          <span class="business_col-icon icon-menu6"></span>
          文件上传
        </router-link>
      </Col>
    </Row>
    <Row>
      <Col span="12" class="business_col">
        <router-link :to="{ name: 'CompanySupInfo'}" :class="result.sup=='1'?'istrue':''">
          <span class="business_col-num">7</span>
          <span class="business_col-icon icon-menu7"></span>
          补充信息
        </router-link>
      </Col>
      <Col span="12" class="business_col" >
        <router-link :to="{ name: 'record' }" :class="result.coops=='1'?'istrue':''">
          <span class="business_col-num">8</span>
          <span class="business_col-icon icon-menu8"></span>
          刻章备案
        </router-link>
      </Col>
    </Row>
    <Button type="success" class="submit" v-if="isshow" @click="submit">提交签字确认</Button>
  </div>
</template>

<script>
import request from '../../utils/request'
  export default {
    data() {
      return {
        isshow: false,
        gid: '',
        result: {}
      }
    },
    beforeRouteEnter(to, from, next) {
      if (from.name === 'Process') {
        alert('业务已提交，无法返回业务菜单页')
        history.pushState(null, null, from.fullPath)
      } else {
        next()
      }
    },
    methods: {
      queryForm() {
        request.get('/interface/apply/cp/setup/queryEditForm.do', { gid: sessionStorage.getItem('gid') }
        ).then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
            return null
          }
          // 成功逻辑
          this.result = response.data.data
          this.result.contactState = this.result.nameinfo
          if ((this.result.basic + this.result.busiscope +
              this.result.inv + this.result.mem +
              this.result.contactState + this.result.fupload +
              this.result.sup + this.result.coops) === '11111111') {
            this.isshow = true
          }
        })
      },
      submit() {
        this.$Modal.confirm({
          title: '提交签字确认',
          content: '<p>请确认所有填报内容不再修改，并提交签字确认吗？</p>',
          onOk: () => {
            request.get('/interface/rule/cpSetup.do', { gid: sessionStorage.getItem('gid') }
            ).then(response => {
              if (response.data.result === 'error') {
                this.$ErrorAlert(response.data.message)
                return null
              }
              let ruleList = response.data.data.rule
              let lockRuleList = []
              for (let i in ruleList) {
                if (ruleList[i].type === 'lock') {
                  lockRuleList.push(ruleList[i])
                }
              }
              if (lockRuleList.length > 0) {
                this.$router.push({ name: 'RuleResult', params: {'resultList': JSON.stringify(lockRuleList)} })
              } else {
                request.get('/outer/confirm/submit.do', { gid: sessionStorage.getItem('gid') }
                ).then(response => {
                  if (response.data.result === 'error') {
                    this.$ErrorAlert(response.data.message)
                    return null
                  }
                  this.$SuccessAlert('提交成功，进入业务进度查看页面')
                  // 成功逻辑
                  this.$router.push({ name: 'Process', params: {'gid': sessionStorage.getItem('gid')} })
                })
              }
            })
          },
          onCancel: () => {}
        })
      }
    },
    mounted() {
      this.queryForm()
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .business {
    height: 100%;
    .ivu-row {
      height: 22%;
      // border: 1px solid #ccc;
      &:last-child {
        border-bottom: 0;
      }
    }
    .istrue{
      background: url(../../assets/img/check.png) no-repeat top right;
      background-size: 1.5rem auto;
    }
    &_col {
      height: 100%;
      padding: .3rem .5rem;
      &:nth-child(odd) {
        // border-right: 1px solid #ccc;
      }
      >a {
        border: 1px solid #ccc;
        display: block;
        position: relative;
        padding: 0.54rem;
        height: 100%;
        text-align: center;
        font-size: 0.57rem;
        color: #000;
      }
      &-num {
        color: #CCCCCC;
        position: absolute;
        left: 0.5rem;
        top: 0.5rem;
      }
      &-icon {
        display: block;
        height: 80%;
      }
      @for $i from 1 through 8 {
        .icon-menu#{$i} {
          background: url(../../assets/img/menu#{$i}.png) no-repeat center center;
          background-size: auto 1.75rem;
        }
      }
    }
    .submit{
      display: block;
      margin: 1rem auto 0;
    }
  }

</style>
